<template>
  <el-dialog
      :append-to-body="true"
      title="边界调整申请"
      :visible.sync="visible"
      width="600px"
      :close-on-click-modal="false"
  >
    <el-form
        v-loading="loading"
        ref="form"
        :model="formData"
        label-width="120px"
        size="small"
        :rules="rules"
    >
      <!-- 调整区划代码 -->
      <el-form-item label="调整区划代码" prop="areaCode">
        <el-input v-model="formData.areaCode" :readonly="!isEdit && !isAdd"/>
      </el-form-item>

      <!-- 调整区划名称 -->
      <el-form-item label="调整区划名称" prop="areaName">
        <el-input v-model="formData.areaName" :readonly="!isEdit && !isAdd"/>
      </el-form-item>

      <!-- 说明附件 -->
      <el-form-item label="说明附件" prop="attachments">
        <div class="attachment-wrapper">
          <el-upload
              class="upload-demo"
              :action="uploadAction"
              :on-success="handleSuccess"
              :limit="1">
            <el-button type="primary" icon="el-icon-plus" class="green-text">添加</el-button>
          </el-upload>
        </div>
      </el-form-item>

      <!-- 描述信息 -->
      <el-form-item label="描述信息" prop="description">
        <el-input
            type="textarea"
            v-model="formData.remark"
            :rows="4"
            placeholder="请输入描述信息"
            show-word-limit
            :maxlength="150"
        />
      </el-form-item>

      <!-- 地图绘制 -->
      <el-form-item label="地图绘制">
        <div class="map-control">
          <span v-if="vectorId || formData.vectorId || polygon || formData.polygon" style="color: #0bda6f">已绘制</span>
          <el-button type="success" size="mini" @click="afreshMap">{{polygon || formData.polygon?'重新绘制':'绘制'}}</el-button>
          <el-button type="success" size="mini" @click="afreshJsonMap">{{vectorId|| formData.vectorId?'重新编辑图层':'编辑图层'}}</el-button>
        </div>
      </el-form-item>

      <!-- 边界调整元信息 -->
      <div class="section-title">边界调整元信息</div>
      <el-form-item label="调整人">
        <span v-if="areaData && areaData.areaCode || formData.areaCode">{{ areaData.areaCode || formData.areaCode }}</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</span>
      </el-form-item>

      <!-- 审核进度 -->
<!--      <div class="section-title">审核进度</div>-->
<!--      <div class="progress-item">-->
<!--        <span class="progress-time">2024-07-09 11:21:24</span>-->
<!--      </div>-->
    </el-form>

    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit('1')" v-if="!isEdit">上报</el-button>
      <el-button type="success" @click="handleSubmit('0')" v-if="!isEdit">保存</el-button>
      <el-button type="primary" @click="editSubmit()" v-if="isEdit">修改</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch} from 'vue-property-decorator'
import {Form} from 'element-ui'
import {changeApplyAdd, changeApplyEdit} from "@/api/investDataCommon";
import {Getter} from "vuex-class";
import dayjs from "dayjs";
@Component({
  computed: {
    dayjs() {
      return dayjs
    }
  }
})
export default class BoundaryAdjustDialog extends Vue {
  @Getter('areaData') private areaData!: any;
  @Prop() private polygon!: string;
  @Prop() private vectorId!: string;
  @Prop() private isEdit!: boolean;
  @Prop() private isAdd!: boolean;
  @Watch("areaData")
  changeAreaData(val){
    if(val){
      this.formData.areaCode = val.areaCode
      this.formData.areaName = val.areaName
    }
  }
  private visible = false
  private uploadAction = process.env.VUE_APP_BASE_API  +'/resources/upload';
  private formData =  {
    remark:'',
    vectorId:'',
    areaCode:'',
    areaName:'',
    polygon:'',
    attachId:'',
  }
  rules = {
    areaCode: [
      { required: true, message: '请输入调整区划代码', trigger: 'blur' },
    ],
    areaName: [
      { required: true, message: '请输入调整区划名称', trigger: 'blur' },
    ]
  }
  private loading = false
  show(){
    this.visible = true
  }
  private handleCancel() {
    this.visible = false
  }

  private async handleSubmit(status) {

    const form = this.$refs.form as Form
    try {
      await form.validate()
      const {workId,areaId,areaLevel,workName} = this.areaData
      let formData = {
        ...this.formData,
        workId,
        areaId,
        areaLevel,
        workName,
        vectorId: this.vectorId || this.formData.vectorId,
        status:status,
        polygon:this.polygon || this.formData.polygon,
        attachId:''
      }
      this.loading = true
      changeApplyAdd({...formData}).then(()=>{
        this.loading = false
        // 处理提交逻辑
        this.$message.success('提交成功')
        this.visible = false
        this.$emit('success')
      }).catch(()=>{
        this.loading = false
      })
    } catch (error) {
      console.error(error)
    }
  }

  private async editSubmit(){
    const form = this.$refs.form as Form
    try {
      await form.validate()
      let formData = {
        ...this.formData,
        polygon:this.polygon || this.formData.polygon,
        vectorId:this.vectorId || this.formData.vectorId,
      }
      this.loading = true
      changeApplyEdit({...formData}).then(()=>{
        this.loading = false
        this.$message.success('提交成功')
        this.visible = false
        this.$emit('success')
      }).catch(()=>{
        this.loading = false
      })
    } catch (error) {
      console.error(error)
    }
  }
  afreshMap(){
    this.visible = false
    this.$emit('afreshMap')
  }

  afreshJsonMap(){
    this.visible = false
    this.$emit('afreshJsonMap')
  }

  handleSuccess(file) {
    this.formData.attachId = file.data.id
  }
}
</script>

<style lang="scss" scoped>
.attachment-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .attachment-text {
    color: #666;
  }

  .attachment-actions {
    .green-text {
      color: #009688;
    }
  }
}

.map-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
}

.section-title {
  font-size: 14px;
  color: #009688;
  font-weight: 500;
  margin: 20px 0 10px;
  padding-left: 10px;
  border-left: 3px solid #009688;
}

.progress-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-left: 30px;

  .progress-time {
    color: #999;
    font-size: 13px;
  }
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

:deep(.el-form-item__label) {
  color: #666;
}

:deep(.el-radio__label) {
  color: #333;
}

.dialog-footer {
  padding-top: 10px;
}
</style>
